<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>重置密码</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    html, body {width: 100%;height: 100%;overflow: hidden}
    body {background:url(img/bg.jpg)}
    body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
    .layui-container {width: 100%;height: 100%;overflow: hidden}
    .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:30%;margin-left:-180px;margin-top:-100px;}
    .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
    .logo-title h1 {color:#66afe9;font-size:25px;font-weight:bold;}
    .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
    .login-form .layui-form-item {position:relative;}
    .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
    .login-form .layui-form-item input {padding-left:36px;}
    .captcha {width:60%;display:inline-block;}
    .captcha-img {display:inline-block;width:34%;float:right;}
    .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
</style>
<body>

<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">

            <form class="layui-form" action="" id="adminFrm">
                <div class="layui-form-item logo-title">
                    <h1 style="color: cornflowerblue;font-family: 楷体">重置密码</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username"></label>
                    <input type="text" name="userName" lay-verify="required|userName" placeholder="要重置的用户名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password"></label>
                    <input type="password" name="passWord" lay-verify="required|passWord" placeholder="密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password"></label>
                    <input type="password" name="repass" lay-verify="required|repass" placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" id="loginBtn" lay-submit="" lay-filter="login">重置密码</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script>

    layui.use(['form','layer','table','jquery'], function(){
        var form = layui.form,
            layer= layui.layer,
            $=layui.jquery;

        //监听提交
        form.on('submit(login)', function(data){
            var adminInfo=$('#adminFrm').serialize();

            layer.prompt({title:'确认你的QQ邮箱'},function(val, index){
                var emailRegex=new RegExp("[1-9]\\d{7,10}@qq\\.com");
                if (val.match(emailRegex)){
                    layer.close(index);
                    $.ajax({
                        type: 'PUT',
                        url: '/accountApi/reset',
                        data: adminInfo+'&email='+val,
                        success: function (res) {
                            if(res.data=='SUCCESS'){
                                //登入成功的提示与跳转
                                layer.msg('密码重置成功', {
                                    offset: '15px'
                                    ,icon: 1
                                    ,time: 1500
                                }, function(){
                                    location.href = 'login.html';
                                });
                            }else if(res.data=='NO_EXIST') {
                                layer.msg('用户名不存在',{icon: 2})

                            }else if(res.data=='NO_BIND') {
                                layer.msg('该邮箱未绑定你的用户名',{icon: 2})

                            }

                        }
                    })
                }else{
                    layer.msg('请输入正确的QQ邮箱', {icon: 5,anim: 6});
                }

            });

            return false;
        });

        //自定义验证规则
        form.verify({
            userName: [/^[a-zA-Z0-9]{4,6}$/, '必须是4~6位字母、数字组成'],
            passWord: [/^[a-zA-Z0-9]{6,12}$/, '必须是6~12位字母、数字组成'],
            repass: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (value!=$('[name=passWord]').val()) {
                    return '密码不一致';
                }
            }

        });
    });
</script>
</body>
</html>